<template>
    <div class="vote-contener">
        <Banner state='vote'></Banner>
        <div class='vote-list-box'>
            <img src="../assets/img/tit_cytp.png" alt="" class="title">
            <div class="vote-desc">
                经过海选，10名车友的视频脱颖而出<br> 每日可投3票，大家快为喜欢的视频投上一票吧！
            </div>
            <div class='list'>
                <div class="item-box" v-for="item in [1,2,3]" :key="item">
                    <VoteItem></VoteItem>
                </div>
            </div>
        </div>
        <Reward></Reward>
        <!-- 底部 -->
        <footer class="footer">本活动解释权归越野侠所有</footer>
    </div>
</template>
<script>
import Banner from "../components/banner";
import Reward from "../components/reward";
import VoteItem from "../components/vote-item";
export default {
    components:{
        Banner,
        Reward,
        VoteItem
    }
}
</script>

<style lang="stylus" scoped>
.vote-contener
    background $theme-color
    .vote-list-box
        box-sizing border-box
        padding 15px 20px
        .title
            display block
            width 222px
            margin 0 auto
        .vote-desc
            text-align center
            font-size 14px
            line-height 24px
            color #FFEBD7
        .list
            width 100%
            margin-top 16px
            &::after
                content ''
                display block
                clear both
            .item-box
                width 47.5%
                background $theme-color-deeper
                margin-bottom 15px
                box-shadow 0px 2px 8px 0px rgba(100,3,24,0.3)
                border-radius 4px
                &:nth-child(odd)
                    float left
                &:nth-child(even)
                    float right
    .footer 
        color #980424
        padding 24px 0
        text-align center
        font-size 12px
</style>